import { computed, defineComponent,  PropType} from "vue";
import { ElImage,ElMessage  } from "element-plus";
import "./index.scss"
import router from "@/router/permission";
import { RouteType } from "@/types/router";

export default defineComponent({
  props: {
    route: {
      type: Object as PropType<RouteType> ,
      required: true
    }
  },
  setup(props) {
    const url = computed(() => new URL(`../../../assets/routerIcon/${props.route.code}.png`, import.meta.url).href)
    
    return () => <div class="thirdIndex m-window cursorPointer" onClick={() => router.push({ name: props.route.code })}>
      <div class="thirdIndexIcon allCenter">
        <ElImage
          style={{ width: '50px', height: "50px" }}
          src={url.value} fit="contain"
          v-slots={{
            placeholder: () => <span></span>
          }}
        />
      </div>
      <p class="thirdIndexName allCenter">{ props.route.title }</p>
    </div>
  }
})